<template>
  <div class="timeContain">
    <div class="timeChoose">
      <div class="params">
        <div class="item">
          <span>时间：</span>
          <select v-model="selectTimeEventList">
            <option :value="item" v-for="item in timeEventList" :key="item">{{item}}</option>
          </select>
          <select v-model="selectHour">
            <option value="00">00</option>
            <option :value="('0'+item).substr(-2)" v-for="item in 23" :key="item">{{ ('0'+item).substr(-2) }}</option>
          </select>
        </div>
        <div class="item">
          <span>间隔：</span>
          <select v-model="selectInterVal">
            <option :value="item" v-for="item in interVal" :key="item">{{item}}</option>
          </select>
        </div>
        <div class="item">
          <span>速度：</span>
          <select v-model="selectSpeed">
            <option :value="item" v-for="item in speed" :key="item">{{ item }}</option>
          </select>
        </div>
      </div>

      <div class="timeChoose-control" style="margin-left: 12px;">
        <ul>
          <li class="bg">
            <img src="../assets/images/ico_left.png" alt="" @click="lastTime()" />
          </li>
          <li class="bg">
            <img :src="startBackground" style="width: 15px;" alt="" @click="startPlay()" />
          </li>
          <li class="bg">
            <img src="../assets/images/ico_right.png" alt="" @click="anotherTime()" />
          </li>
        </ul>
      </div>
    </div>
    <div class="timeMenu">
      <div class="timeMenu_btn" @click="dayLeft()">
        <img src="../assets/images/ico_left.png" alt="" />
      </div>
      <div class="timeLine" @click="clickTimeLine">
        <div class="timeLineBox">
          <div class="timeMain">
            <div class="timeMainNowTime" :style="{ left: left }">
              {{ lineTitle }}
              <div class="threefrom"></div>
            </div>
            <div class="timeMainDays" v-for="(item, dayNumIndex) in dayNum" :style="{ left: index * 1920 + 'px' }">
              <!-- <div class="timeMainDays_name">{{ item.name }}</div> -->
              <div v-for="(item, hourIndex) in dayNum[dayNumIndex].hoursList" class="timeMainHours"
                :style="{ width: hourW + '%' }"
                :class="(hourIndex % 1 != 0 ? 'widthcss' : '', hourIndex < index.h ? 'bluc' : '')">
                <div class="timeMainHourIndex" v-if="hourIndex % 1 == 0">
                  <div>
                    {{ hourIndex }}
                  </div>
                </div>
                <div v-for="(minItem, minIndex) in dayNum[dayNumIndex].hoursList[hourIndex]
                  .minList" class="timeMainMin" :class="(minIndex < 0 ? 'activemin' : '',
                    minIndex < index.m && hourIndex == index.h ? 'bluc' : '')
                    " :style="{ width: mWidth + 'vw' }" @click="clickNowIndex(dayNumIndex, hourIndex, minIndex)">
                  <span :class="minIndex == 0 ? 'minstyle' : ''"></span>
                  <div class="tips">{{ minItem.substr(-8)}}</div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="timeMenu_btn" @click="dayRight()">
        <img src="../assets/images/ico_right.png" alt="" />
      </div>
    </div>

  </div>
</template>

<script>
import moment from "moment";
import { FilterTimeList, GetEleIndex } from "../utils/index";
const DAYWidth = 100 //一天的宽度
const HOURWith = DAYWidth / 24 //小时宽度
import startPng from '../assets/images/begin_ico.png'
import suspendPng from '../assets/images/zanting_ico.png'

export default {
  name: "TimeLine",
  props: {},
  data() {
    return {
      dayNum: 0,
      minNumber: 6,
      hourW: HOURWith,
      index: {
        d: null,
        h: new Date().getHours(),
        m: null,
      },
      lineTitle: null,//时间轴的title

      timeEventList: [],//
      selectTimeEventList: null,

      hourList: Array.from({ length: 24 }, (v, k) => k < 10 ? '0' + k : k),
      selectHour: null,

      startPlayStatus: false,
      startBackground: suspendPng,

      startTimer: null,//动画定时器

      whetherStart: false,//控制播放按钮标识
      selectInterVal: '1小时',
      interVal: [
        '6分钟', '1小时'
      ],
      initHourInterVal: 6,//初始化时间往前推几小时
      isChangeHour: true,//是否更换houre
      controlEmit: false,
      selectSpeed: '1.8秒',
      speed: ['0.8秒', '1.5秒', '1.8秒']
    };
  },

  mounted() {
    this.initTimeLine();
    for (let i = 10; i > -1; i--) {
      this.timeEventList.push(moment(new Date()).add(-i, "day").format("YYYY-MM-DD"));
    }
  },
  computed: {
    //根据index计算当前时间
    currentTime() {
      if (this.index.m == undefined) return
      let time = this.dayNum[this.index.d].hoursList[this.index.h].minList[this.index.m],
        nowTime = this.dayNum[this.index.d].hoursList[this.index.h].minList[this.index.m].split(' ')[1]
      this.lineTitle = nowTime.split(':')[0] + ':' + nowTime.split(':')[1];
      return time
    },
    mWidth() {
      return HOURWith / (60 / this.minNumber);
    },
    left: {
      get() {
        if (this.index.d != null) {
          return (
            this.index.d * DAYWidth +
            this.index.h * HOURWith +
            this.index.m * this.mWidth +
            "%"
          );
        } else {
          return "";
        }
      },
      set(val) {
        return val;
      },
    },

  },

  methods: {

    //获取雷达时间时间点
    getMindex_m() {
      let minArr = Array.from({ length: 10 }, (v, k) => [k * 6, (k * 6) + 6]);
      let minArr1 = Array.from({ length: 10 }, (v, k) => k * 6);
      let iIndex = null
      let m = new Date().getMinutes();

      for (let i = 0; i < minArr.length; i++) {
        if (m >= minArr[i][0] && m <= minArr[i][1]) {
          iIndex = i
        }
      }

      if ((new Date()).getMinutes() > 5) {
        if (iIndex == 0) {
          return moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH:") + this.filterNum(minArr[9][0]);
        } else {
          return moment(new Date()).format("YYYY-MM-DD HH:") + this.filterNum(minArr[iIndex - 1][0]);
        }
      } else {
        if (iIndex == 0) {
          return moment(new Date()).add(-2, 'hour').format("YYYY-MM-DD HH:") + this.filterNum(minArr[9][0]);
        } else {
          return moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH:") + this.filterNum(minArr[iIndex - 1][0]);
        }
      }


    },

    //获取六分钟的前一个时间点
    getMindex() {
      let minArr = Array.from({ length: 10 }, (v, k) => [k * 6, (k * 6) + 6]);
      let minArr1 = Array.from({ length: 10 }, (v, k) => k * 6);
      let iIndex = null
      let m = new Date().getMinutes();
      for (let i = 0; i < minArr.length; i++) {
        if (m >= minArr[i][0] && m <= minArr[i][1]) {
          iIndex = i
        }
      }
      return this.filterNum(minArr[iIndex][0]);
    },

    // 设置最近时间的联动操作，并且emit timeChange事件
    setRecentTime() {
      this.selectTimeEventList = this.currentTime.split(' ')[0];
      this.selectHour = this.filterNum(new Date(this.currentTime).getHours());
    },
    // 初始化
    initTimeLine(option) {
      if (option) {
        this.dayNum = FilterTimeList(option[0], option[1], option[2]);
        this.minNumber = option[2];
      } else {

        if ((new Date()).getMinutes() > 5) {
          let start = moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).add(-0, 'hour').format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
        } else {
          var start = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
        }

        this.setRecentTime();//默认显示时间
        //this.startPlay();
      }
    },
    //设置索引
    setTimeLineIndex(nowTime) {
      if (!this.dayNum) return;
      let index = GetEleIndex(nowTime, this.dayNum)
      this.index = {
        d: index.d,
        h: index.h,
        m: index.min,
      };
      this.time = this.dayNum[index.d].hoursList[index.h].minList[index.m]
      this.lineTitle = this.filterNum(new Date(this.currentTime).getHours()) + ":" + this.filterNum(new Date(this.currentTime).getMinutes());
    },
    //切换至当前时间
    currentTimeChange() {
      if (this.selectInterVal == "1小时") {

        if ((new Date()).getMinutes() > 5) {
          let start = moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.startBackground = suspendPng
          this.$emit("timeChange", nowTime)
        }
        else {
          let start = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.startBackground = suspendPng
          this.$emit("timeChange", nowTime)
        }

      } else if (this.selectInterVal == "6分钟") {

        if ((new Date()).getMinutes() > 5) {

          this.isChangeHour = false;
          let start1 = moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
            end1 = moment(new Date()).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00",
            nowTime1 = moment(new Date()).format("YYYY-MM-DD HH") + `:${this.getMindex()}:00`;
          this.dayNum = FilterTimeList(start1, end1, this.minNumber);
          this.setTimeLineIndex(nowTime1);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.$emit("timeChange", nowTime1)
          this.startBackground = suspendPng
        } else {
          this.isChangeHour = false;
          let start1 = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            end1 = moment(new Date()).add(1, 'day').add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            nowTime1 = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH") + `:${this.getMindex()}:00`;
          this.dayNum = FilterTimeList(start1, end1, this.minNumber);
          this.setTimeLineIndex(nowTime1);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.$emit("timeChange", nowTime1)
          this.startBackground = suspendPng
        }

      }
    },

    //切换至当前时间 左下角监控降水
    currentTimeChange_m() {
      if (this.selectInterVal == "1小时") {

        if ((new Date()).getMinutes() > 5) {

          let start = moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.startBackground = suspendPng
          this.$emit("timeChange", nowTime)
        }
        else {
          let start = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            end = moment(new Date()).add(1, 'day').add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            nowTime = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD HH") + ":00:00";
          this.dayNum = FilterTimeList(start, end, this.minNumber);
          this.setTimeLineIndex(nowTime);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.startBackground = suspendPng
          this.$emit("timeChange", nowTime)
        }

      } else if (this.selectInterVal == "6分钟") {

        if ((new Date()).getMinutes() > 5) {
          this.isChangeHour = false;
          let start1 = moment(new Date()).format("YYYY-MM-DD") + " 00:00:00",
            end1 = moment(new Date()).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00",
            nowTime1 = `${this.getMindex_m()}:00`;
          this.dayNum = FilterTimeList(start1, end1, this.minNumber);
          this.setTimeLineIndex(nowTime1);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.$emit("timeChange", nowTime1)
          this.startBackground = suspendPng
        }
        else {
          this.isChangeHour = false;
          let start1 = moment(new Date()).add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            end1 = moment(new Date()).add(1, 'day').add(-1, 'hour').format("YYYY-MM-DD") + " 00:00:00",
            nowTime1 = `${this.getMindex_m()}:00`;
          this.dayNum = FilterTimeList(start1, end1, this.minNumber);
          this.setTimeLineIndex(nowTime1);
          clearInterval(this.startTimer);
          this.setRecentTime();
          this.$emit("timeChange", nowTime1)
          this.startBackground = suspendPng
        }
      }
    },
    // 点击时间轴 
    clickNowIndex(d, h, m) {


      if (this.selectInterVal == '6分钟') {
        this.index = {
          d: d,
          h: h,
          m: m,
        };
        // if (new Date(this.currentTime).getHours() != this.index.h) {
        this.$emit("timeChange", this.currentTime);
        // }
      } else if (this.selectInterVal == '1小时') {
        this.index = {
          d: d,
          h: h,
          m: 0
        };
      }
      this.setTimeLineIndex(this.currentTime);
      this.setRecentTime();
      this.isChangeHour = false;
    },

    // 上个时次
    lastTime() {
      if (this.selectInterVal == '1小时') {
        this.index.h -= 1;
        if (this.index.h < 0) {
          this.index.h = 0;
          return
        }
        this.selectHour = this.filterNum(new Date(this.currentTime).getHours());

      }

      if (this.selectInterVal == '6分钟') {
        this.index.m -= 1;
        if (this.index.m < 0) {
          this.index.m = 9
          this.index.h -= 1;
        }
        this.isChangeHour = false;
        this.selectHour = this.filterNum(new Date(this.currentTime).getHours());
        this.$emit("timeChange", this.currentTime)
      }
    },
    // 下个时次
    anotherTime() {
      this.isChangeHour = true;
      if (this.selectInterVal == '1小时') {
        {
          this.index.h += 1;
          if (this.index.h > 23) {
            this.index.h = 0;
            this.dayRight()
            this.startPlayStatus = false
            clearInterval(this.startTimer);
            return
          }
        }
        this.selectTimeEventList = this.currentTime.split(' ')[0];
        this.selectHour = this.filterNum(new Date(this.currentTime).getHours());

      }
      if (this.selectInterVal == '6分钟') {
        //判断下一时次超过当前时间return,必须clear定时器
        let jiezhiTime = moment(new Date()).format('YYYY-MM-DD HH') + ':' + this.getMindex() + ':00';
        if (this.currentTime == jiezhiTime) {
          this.startPlayStatus = false;
          clearInterval(this.startTimer);
          return;
        }
        if (this.index.h == 23 && this.index.m >= 9) {
          this.dayRight();
          return
        }
        this.index.m += 1;
        let mLength = this.dayNum[this.index.d].hoursList[this.index.h].minList.length
        if (this.index.m == mLength) {
          this.index.h += 1;
          this.index.m = 0
        }
        if (new Date(this.currentTime).getMinutes() != 0) {
          this.$emit("timeChange", this.currentTime)
        }
        this.setRecentTime();
      }
    },
    //播放暂停
    startPlay() {
      this.startPlayStatus = !this.startPlayStatus;
      if (this.startPlayStatus) {
        this.$parent.startPlay = 1;
        this.startTimer = setInterval(() => {
          this.anotherTime();
          // }, this.selectInterVal == '6分钟' ? 1500 : 1000)
        }, parseInt(this.selectSpeed.replace(".", "").replace("秒", "")) * 100)
      } else {
        this.$parent.startPlay = 0;
        if (this.startTimer) {
          clearInterval(this.startTimer);
        }
      }
    },

    // 上一天
    dayLeft() {
      let start = moment(new Date(this.currentTime)).add(-1, 'day').format("YYYY-MM-DD") + ' 00:00:00'
      let end = moment(new Date(this.currentTime)).format("YYYY-MM-DD") + ' 00:00:00'
      this.initTimeLine([start, end, 6]);
      this.setRecentTime();
      this.$emit("timeChange", this.currentTime)
    },
    // 下一天
    dayRight() {
      let start = moment(new Date(this.currentTime)).add(1, 'day').format("YYYY-MM-DD") + ' 00:00:00'
      let end = moment(new Date(this.currentTime)).add(2, 'day').format("YYYY-MM-DD") + ' 00:00:00'
      this.initTimeLine([start, end, 6]);
      this.setRecentTime();
      this.$emit("timeChange", this.currentTime)
    },
    filterNum(val) {
      return val < 10 ? '0' + val : val
    },
    updateForDay(time) {
      let start = time, end = moment(new Date(start)).add(1, 'day').format("YYYY-MM-DD") + " 00:00:00";
      this.dayNum = FilterTimeList(start, end, this.minNumber);
      this.setTimeLineIndex(time);
    }
  },
  watch: {
    selectInterVal(val) {
      // this.currentTimeChange();
    },
    startPlayStatus(status) {
      if (status) {
        this.startBackground = startPng
        this.$parent.startPlay = 1;
      } else {
        this.startBackground = suspendPng
        this.$parent.startPlay = 0;
      }
    },
    selectTimeEventList(val) {

      if (val == '请选择') return
      if (val != moment(new Date()).format("YYYY-MM-DD")) {
        clearInterval(this.startTimer);
        this.updateForDay(val + ' 00:00:00');
        this.setRecentTime();
        this.startPlayStatus = false
        this.$emit("timeChange", this.currentTime)
      } else {
        //this.updateForDay(val + ' 00:00:00');
        //if (this.startPlayStatus) {
        //} else {
        //    this.selectTimeEventList = this.currentTime.split(' ')[0];
        //    this.selectHour = this.filterNum(new Date().getHours());
        //}
      }
    },
    selectHour(val, oldVal) {
      if (val == '请选择') return
      if (this.selectTimeEventList == null || this.selectTimeEventList == '请选择') {
        this.selectTimeEventList = this.currentTime.split(" ")[0];
      }
      if (this.selectInterVal == '1小时') {
        let time = this.selectTimeEventList + ' ' + this.filterNum(parseInt(val)) + ':00:00';
        this.setTimeLineIndex(time);
        if (this.selectInterVal != '6分钟') {
          this.$emit("timeChange", time)
        }
      } else if (this.selectInterVal == '6分钟') {
        let mTime = moment(new Date(new Date(this.currentTime).setHours(this.filterNum(parseInt(val))))).format("YYYY-MM-DD HH:mm:ss");
        this.setTimeLineIndex(mTime);
        this.$emit("timeChange", mTime)
      }
    },
  }
};
</script>
<style lang="scss" scoped>
ul,
li {
  /* padding: 0px 0px !important; */
  /* margin: 0px 0px !important; */
}

h3 {
  margin: 40px 0 0;
}

.timeContain {
  /* box-shadow: rgb(127,246,222) 0px 0px 10px 0px;*/
  width: 100%;
  /*    border-radius: 60px;*/
  height: 80px;
  display: flex;
  align-items: center;
  /*    justify-content: safe center;*/
  position: absolute;
  bottom: 0px;
  overflow: hidden;
  color: white;
  font-weight: 600;
  padding-right: 20px;
  /* overflow-y: scroll; */
}

.timeChoose {
  display: flex;
  align-items: center;

}



.timeChoose-control ul {
  list-style: none;
  display: flex;
  cursor: pointer;
}

.timeChoose-control ul li {
  display: flex;
  align-items: center;
  margin-right: 3px;
}

.timeChoose-control ul li img {
  width: 24px;
}

ul {
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}

h3 {
  margin: 40px 0 0;
}

.timeMenu {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* overflow-y: scroll; */
}

.timeMenu .timeMenu_btn {
  display: flex;
  width: 32px;
  height: 36px;
  background: #0276CD;
  justify-content: center;
  align-items: center;
}

.timeLine {
  width: 100%;
  height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 20px;
}

.timeLine .timeLineBox {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timeLine .timeLineBox .timeMain {
  width: 100%;
  height: 100%;
  position: relative;
}

.bluc {
  background-color: #0276CD;
}

.timeMainDays {
  width: 100%;
  position: absolute;
  height: 100%;
  display: flex;
  border-right: 1px solid black;
}

.timeMainDays_name {
  color: white;
  position: absolute;
  left: 50%;
  font-size: 12px;
}

.minstyle {
  height: 50% !important;
}

.timeMainHours {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  
}
.tips{
  display: none;
  position: absolute;
  z-index: 9999999;
  left: 50%;
  top: -20px;
  transform: translateX(-50%);
  background: rgb(235, 235, 96,0.7);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  &::before{
    content: '';
    position: absolute;    
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid rgb(235, 235, 96,0.7);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid transparent;
  }
}
.widthcss {
  border-right: 3px solid white;
  z-index: 999;
}

.timeMainHourIndex {
  position: absolute;
  top: -6%;
  font-size: 12px;
  color: white;
  left: 0%;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -28%;
  z-index: 99;
}

.timeMainMin {
  height: 100%;
  position: relative;
  &:hover{
    .tips{
      display: block;
    }
  }
}

.timeMainMin span {
  display: block;
  width: 1px;
  height: 22%;
  background-color: #fff;
  position: absolute;
  bottom: -1px;
  left: -1px;
}

.activemin {
  background-color: #1D398F;
}

.defaultBlackColor {
  background-color: #E3E7F7;
}

.defaultBlackWhite {
  background-color: rgba(0, 0, 0, 0.25);
}


/* 当前时间box */

.timeMainNowTime {
  position: absolute;
  display: none;
  width: 90px;
  height: 22px;
  /*background: #ff8200;*/
  box-shadow: 0px -3px 10px 0px rgb(255 130 0 / 30%);
  font-size: 12px;
  border-radius: 20px;
  color: white;

  cursor: pointer;
  margin-left: -45px;
  text-align: center;
  top: -21px;
  line-height: 22px;
}

.threefrom {
  width: 0px;
  height: 0px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  /*    border-top: 8px solid #ff8200;*/
  position: absolute;
  left: 50%;
  margin-left: -8px;
}

.params {
  display: flex;
  align-items: center;

  span {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    margin-left: 25px;
  }

  select {
    height: 31px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    margin-left: 2px;

    option {
      font-size: 14px;
      background: #010D2F;
    }

  }
}

.bg {
  width: 32px;
  height: 32px;
  background: #0276CD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>